<template>
  <div class="app-container">
    <el-form
      :model="form"
      ref="form"
      label-width="120px"
      v-loading="formLoading"
      :rules="rules"
    >
      <el-form-item label="所属课程：" required>
        <course-select :course-id.sync="form.courseId"></course-select>
      </el-form-item>

      <el-form-item label="试卷名称：" prop="examName">
        <el-input
          type="text"
          placeholder="请输入试卷名称"
          v-model="form.examName"
        />
      </el-form-item>

      <el-form-item style="width: 50%" label="开始时间：" prop="startTime">
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间：" prop="endTime">
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="考试时长：">
        <el-input type="text" disabled v-model="duration" />
      </el-form-item>

      <el-form-item label="试卷总分数：">
        <el-input type="text" disabled v-model="examScore" />
      </el-form-item>

      <el-form-item label="是非题数量">
        <el-input type="text" v-model="form.judgeNum">
          <template #append>题</template>
        </el-input>
      </el-form-item>

      <el-form-item label="是非题单题分数">
        <el-input type="text" v-model="form.judgeScore">
          <template #append>分</template>
        </el-input>
      </el-form-item>

      <el-form-item label="单选题数量">
        <el-input type="text" v-model="form.singleNum">
          <template #append>题</template>
        </el-input>
      </el-form-item>

      <el-form-item label="单选题单题分数">
        <el-input type="text" v-model="form.singleScore">
          <template #append>分</template>
        </el-input>
      </el-form-item>

      <el-form-item label="多选题数量">
        <el-input type="text" v-model="form.selectNum">
          <template #append>题</template>
        </el-input>
      </el-form-item>

      <el-form-item label="多选题单题分数">
        <el-input type="text" v-model="form.selectScore">
          <template #append>分</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="
                   primary"
          @click="submitForm"
          >提交</el-button
        >
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import examApi from "@/api/exam";
import CourseSelect from "@/components/CourseSelect";

export default {
  components: {
    CourseSelect,
  },
  data() {
    return {
      form: {
        examName: "",
        courseId: 0,
        startTime: "",
        endTime: "",
        duration: 0,
        examScore: 0,
        judgeScore: 0,
        judgeNum: 0,
        singleScore: 0,
        singleNum: 0,
        selectScore: 0,
        selectNum: 0,
      },
      duration: "0分钟",
      examScore: "0分",
      formLoading: false,
      rules: {
        examName: [
          { required: true, message: "请输入试卷名称", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请选择开始试卷", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择结束试卷", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  watch: {
    form: {
      handler(val) {
        // 计算考试分数
        var singleScore = val.singleNum * val.singleScore;
        var selectScore = val.selectNum * val.selectScore;
        var judgeScore = val.judgeNum * val.judgeScore;
        var examScore = singleScore + selectScore + judgeScore;
        this.examScore = examScore + "分";
        // 计算考试时长
        var startTime = this.$utils.strToTimestamp(val.startTime);
        var endTime = this.$utils.strToTimestamp(val.endTime);
        var duration = endTime - startTime;
        if (duration > 0) {
          this.form.duration = duration;
          this.duration = this.$utils.showTime(duration);
        } else {
          this.form.duration = 0;
          this.duration = "0分钟";
        }
      },
      deep: true,
    },
  },
  methods: {
    async submitForm() {
      let _this = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.courseId <= 0) {
            _this.$message.error("请选择所属课程");
            return false;
          }
          // 判断考试时长
          if (this.form.duration <= 0) {
            _this.$message.error("考试时间设置不正确");
            return false;
          }
          if (this.form.selectScore <= 0) {
            _this.$message.error("请设置多选题");
            return false;
          }
          if (this.form.singleScore <= 0) {
            _this.$message.error("请设置单选题");
            return false;
          }
          if (this.form.judgeScore <= 0) {
            _this.$message.error("请设置是非题");
            return false;
          }
          this.formLoading = true;
          examApi
            .addAuto(this.form)
            .then(() => {
              _this.$message.success("组卷成功");
              _this.delCurrentView(_this).then(() => {
                _this.$router.push("/exam/list");
              });
            })
            .catch(() => {
              _this.formLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.form = {
        examName: "",
        courseId: 0,
        startTime: "",
        endTime: "",
        duration: 0,
        examScore: 0,
        judgeScore: 0,
        judgeNum: 0,
        singleScore: 0,
        singleNum: 0,
        selectScore: 0,
        selectNum: 0,
      };
    },
    ...mapActions("tagsView", { delCurrentView: "delCurrentView" }),
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped></style>
